<template>
  <view>
    <!-- 弹出框内容 -->

    <view class="popView" style="width: 100%; height: 400px;">
      <view class="popView-titleView">
        <!-- <text class="popView-titleView-text">支付宝类目选择</text> -->
        <image class="popView-titleView-image" mode="aspectFit" src="./image/shutDown-address.png" @click="closeImageClick"></image>
      </view>

      <!-- 头部 -->
      <view class="headPopView">
        <view class="popView-type">
          <view v-for="(item, index) in 3" :key="index" class="popView-type-block" :style="{ width: tabScreenWidth + 'px' }">
            <!-- <text v-if="selectArray <= index">请选择</text> -->

            <text
              class="popView-type-text"
              :class="
                index === selectArray.length
                  ? 'popView-type-active'
                  : selectArray.length < index
                  ? 'popView-type-empty'
                  : 'popView-type-text'
              "
            >
              {{ index === selectArray.length ? '请选择' : selectArray[index] ? selectArray[index].name : '' }}
            </text>
          </view>
        </view>
      </view>

      <!-- 列表 -->
      <view style="display: flex; flex-direction: row; margin-top: 30upx; width: 90%; margin-left: 5%;">
        <scroll-view style="height: 280px;" :style="{ width: tabScreenWidth + 'px' }" scroll-y="true">
          <!-- 列表 -->
          <view class="blockTwoClass" v-if="selectArray.length >= 0" :style="{ width: tabScreenWidth + 'px' }">
            <!-- 列表1 -->
            <view class="blockTwoClass-block">
              <view v-for="(item, index) in myProvinceArray" :key="index" class="popView-block" @click="chooseProvince(item.oneCategory)">
                <text :class="provinceIndex == index ? 'popView-block-text-active' : 'popView-block-text'">{{ item.oneCategory }}</text>
              </view>
            </view>
          </view>
        </scroll-view>

        <scroll-view style="height: 280px;" :style="{ width: tabScreenWidth + 'px' }" scroll-y="true">
          <!-- 列表 -->
          <view class="blockTwoClass" v-if="selectArray.length >= 1" :style="{ width: tabScreenWidth + 'px' }">
            <!-- 列表2 -->
            <view class="blockTwoClass-block">
              <view v-for="(item,index) in myCityArray" :key="index" class="popView-block" @click="chooseCity(item.twoCategory)">
                <text :class="cityIndex === index ? 'popView-block-text-active' : 'popView-block-text'">{{ item.twoCategory }}</text>
              </view>
            </view>
          </view>
        </scroll-view>

        <scroll-view style="height: 280px;" :style="{ width: tabScreenWidth + 'px' }" scroll-y="true">
          <!-- 列表3 -->
          <view class="blockTwoClass" v-if="selectArray.length >= 2" :style="{ width: tabScreenWidth + 'px' }">
            <view class="blockTwoClass-block">
              <view v-for="(item,index) in myAreaArray" :key="index" class="popView-block" @click="chooseArea(item.threeCategory,item.mccCode)">
                <text :class="areaIndex === index ? 'popView-block-text-active' : 'popView-block-text'">{{item.threeCategory}}</text>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
import areaList from '../../commons/area'

export default {
  data() {
    return {
      tabScreenWidth: uni.getSystemInfoSync().windowWidth * 0.3,

      provinceIndex: -1, //省
      myProvinceArray: [],
      oldmyCityArray:[],
      cityIndex: -1, //市
      myCityArray: [],
      chengShi:[],//存放城市
      areaIndex: -1, //区
      myAreaArray: [],
      ceShi:[],
      headtitleArray: [], //在头部显示的地址
      selectArray: [], //选择省市区的下标
      province: '',
      city: '',
      area: '',
	  areaCode:'',//城市的code码,获取区的时候要用到
    }
  },
  props: {
    // 选择 列表 列数 ， 1 只能选择省， 2。 只能选 省 市 ， 3。  省市县
    selectType: {
      type: Number,
      default: 3
    }
  },
  mounted() {
    //this.requestForProvList()
	this.getSSQ()
  },
  components: {},
  methods: {
    chooseProvince(item) {
		console.log(item)
		// let _this =this
		// this.oldmyCityArray = this.chengShi.filter(el=>{
		// 	 if(key === el.value){
		// 		return el.children
		// 	}
		// })
		// console.log('对应的城市',this.oldmyCityArray)
		// for(let i = 0; i<this.oldmyCityArray.length;i++){
		// 	_this.myCityArray = this.oldmyCityArray[i].children
		// }
		// console.log('得到的城市子节点myCityArray',this.myCityArray)
      this.myAreaArray = []
      this.province = { name: item }
      if (this.selectType === 1) {
        this.commitFun()
        return
      }
      // this.requestForCityList(key)
      let arr = new Array(1)
      arr[0] = this.province
      console.log(arr)
      this.selectArray = arr
  

  let parms={
  	mccType: this.$jointString('AL', 'IP', 'AY'),
  	queryType: "TWO_TYPE",
	oneCategory:item,
  }
  this.$showLoading();
  this.$request(this.$api.pubMccList, parms, 'POST')
  .then(res=>{
  	this.$hideLoading();
  	if(res.code === 200){
		this.myCityArray = res.data
  	}
  
  	
  })
  
  
  
  
  
  
  
  
    },
    chooseCity(item) {
		
		
		console.log(item)
      this.myAreaArray = []
      this.city = {name: item }
      if (this.selectType === 2) {
        this.commitFun()
        return
      }
      //this.requestForAreaList(key)
      let arr = new Array(2)
      arr[0] = this.province
      arr[1] = this.city

      console.log(arr)
      this.selectArray = arr
	  let parms={
	  	mccType: this.$jointString('AL', 'IP', 'AY'),
	  	queryType: "THREE_TYPE",
		twoCategory:item,
		oneCategory:this.province.name
	  }
	  this.$showLoading();
	  this.$request(this.$api.pubMccList, parms, 'POST')
	  .then(res=>{
	  	this.$hideLoading();
	  	if(res.code === 200){
	  		this.myAreaArray = res.data
	  	}
	  	
	  })
    },
    chooseArea(item,code) {
		
      console.log(item)
      let arr = new Array(3)
      this.area = {name: item,key:code}
      arr[0] = this.province
      arr[1] = this.city
      arr[2] = this.area

      console.log(arr)
      this.selectArray = arr
     
      this.commitFun()
    },

    commitFun() {
      //数据传输 结束
      let navData = {
        province: this.province,
        city: this.city,
        area: this.area
      }
      this.$emit('commitClick', navData)
    },

    closeImageClick() {
      this.$emit('closeImageClick', 'close')
    },

    requestForProvList() {
      const { area: { province_list } = {} } = areaList.data()
      this.myProvinceArray = province_list
    },
	//一级类目
	getSSQ(){
		let _this=this
		let parms={
			mccType: this.$jointString('AL', 'IP', 'AY'),
			// oneCategory: "",
			queryType: "ONE_TYPE",
			// threeCategory: "",
			// twoCategory: ""
		}
		this.$showLoading();
		this.$request(this.$api.pubMccList, parms, 'POST')
		.then(res=>{
			this.$hideLoading();
			if(res.code === 200){
				this.chengShi = res.data
				// console.log('存放的城市',this.chengShi)
				//   for(let i = 0; i<res.data.length;i++){
				// 			   _this.myProvinceArray.push({
				// 				   label:res.data[i].label,
				// 				   value:res.data[i].value,
				// 			   })
				//   }
				//   console.log('啦啦',this.myProvinceArray)
							// console.log('每一个省++++++++++++++',this.ceShi)
							this.myProvinceArray = res.data
			}
		
			
		})
	},
    requestForCityList(key) {
      // 截取 省的前两位
      const prefix = key.slice(0, 2)
      const { area: { city_list } = {} } = areaList.data()
      const city = {}
      Object.keys(city_list).forEach(i => {
        const city_pre = i.slice(0, 2)
        if (prefix === city_pre) {
          city[i] = city_list[i]
        }
      })
      this.myCityArray = city
    },
    requestForAreaList(key) {
      // 截取 市的前四位
      console.log('市的前四位', key)
      const prefix = key.slice(0, 4)
      const { area: { county_list } = {} } = areaList.data()
      const city = {}
      Object.keys(county_list).forEach(i => {
        const city_pre = i.slice(0, 4)
        if (prefix === city_pre) {
          city[i] = county_list[i]
        }
      })
      console.log('市', city)

      this.myAreaArray = city
    }
  }
}
</script>

<style lang="less">
.blockTwoClass {
  display: flex;
  flex-direction: column;
  // justify-content: center;

  // position: fixed;
  // overflow-y: scroll; //position状态竖向滑动
  // overflow-x: hidden; //position状态不可横向滑动

  .blockTwoClass-block {
    display: flex;
    flex-direction: column;
    justify-content: center;

    .popView-block {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      //height: 80upx;

      .popView-block-text {
        // font-weight: bold;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 28upx;
        color: #333333;
        //height: 80upx;
        width: 100%;
		margin-bottom: 40upx;
      }

      .popView-block-text-active {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        font-weight: bold;
        font-size: 28upx;
        color: #4488ff;
        height: 80upx;
        width: 100%;
      }
    }
  }
}

.popView {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  width: 100%;

  // position: fixed;
  // overflow-y: scroll; //position状态竖向滑动
  // overflow-x: hidden; //position状态不可横向滑动
  // top: 0;
  // left: 0;
  // width: 100%;
  // height: 90%;
  // opacity: 1;
  // z-index: 99;
  // background-color: #FFFFFF;

  .popView-titleView {
    display: flex;
    flex-direction: row;
    font-weight: bold;
    height: 120upx;

    .popView-titleView-text {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      font-size: 32upx;
      color: #FF9500;
    }

    .popView-titleView-image {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 40upx;
      width: 40upx;
      height: 100%;
    }
  }

  .headPopView {
    display: flex;
    align-items: center;
    width: 100%;
    height: 80upx;
    background-color: #f5f5f5;

    .popView-type {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 90%;
      margin-left: 5%;
      height: 40px;

      .popView-type-block {
        display: flex;
        align-items: center;

        .popView-type-text {
          font-size: 28upx;
          color: #666666;
        }

        .popView-type-active {
          font-size: 28upx;
          color: #FF9500;
        }

        .popView-type-empty {
          margin-left: 80upx;
          font-size: 28upx;
          color: #4488ff;
          padding: 0upx 0upx 0upx 0upx;
        }
      }
    }
  }
}
</style>
